<template>
  <div class="regsiter-box">
    <div class="img">
      <img src="https://www.zgmyncpjyw.com/Mobile/images/fruit.png" />
    </div>
    <div class="form-box">
      <h2>用户登录</h2>
      <van-form @submit="onSubmit" class="form">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: .8rem">
          <van-button round block color="#1A9956" native-type="submit">
            提交
          </van-button>
        </div>
        <van-divider
          :style="{
            color: '#888',
            borderColor: '#888',
            padding: '0 .8rem',
          }"
        >
          还没有账户，<span class="once">立即注册</span>
        </van-divider>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getLogin } from "@/api/loginAndDeng";
import { Toast ,Notify} from "vant";
import { useRouter } from "vue-router";
const $router = useRouter()
const username = ref("admin");
const password = ref("123456");
const onSubmit = (values: any) => {
  getLogin(values).then((res: any) => {
    if (res[0].code === "200") {
      
      Toast("登录成功")
      setTimeout(()=>{
        $router.push("/")
      },500)
      sessionStorage.setItem("token",res[0].data.token)
    }
  });
  console.log("submit", values);
};
</script>

<style scoped>
.regsiter-box {
  width: 100%;
  height: 100%;
  background: url("https://www.zgmyncpjyw.com/Mobile/images/boxbg.jpg");
  overflow: hidden;
  position: relative;
}
.form-box {
  margin-top: 100px;
  width: 80%;
  height: 60%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  padding-top: 50px;
}
h2 {
  text-align: center;
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  border-bottom: .05rem solid #999;
  padding-bottom: 10px;
}

.img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  top: 1rem;
}
.img img {
  width: 162px;
  height: 97px;
}
.once {
  color: #1a9956;
}
:deep(.van-popup){
     background-color: rgba(0, 0, 0, 0.385) !important;

}
</style>